<template>
  <el-dialog
    :title="title"
    destroy-on-close
    append-to-body
    :visible.sync="show"
    width="90%"
    :before-close="cancel">
    <!-- ******************************** type == 1 ********************************* -->
    <el-table v-if="type == 1" show-summary :summary-method="handleSum" ref="TableRef" :data="data">
      <el-table-column type="index" :label="$t('序号')" width="60" align="center" />
      <!-- 主订单编号 -->
      <el-table-column show-overflow-tooltip align="center" :label="$t('订单号')" prop="orderNo" />
      <!-- sku编号 -->
      <el-table-column show-overflow-tooltip :label="$t('sku编号')" align="center" prop="skuNo" />
      <!-- sku申请id -->
      <el-table-column show-overflow-tooltip :label="$t('云价格')" align="center" prop="cloudPrice" />
      <!-- 申请时价格 -->
      <el-table-column show-overflow-tooltip :label="$t('申请时价格')" align="center" prop="applyPrice" />
      <!-- 总价值 -->
      <el-table-column show-overflow-tooltip :label="$t('总价值')" align="center" prop="totalPrice" />
    </el-table>
    <!-- ******************************** type == 1 end ********************************* -->

    <!-- ******************************** type == 2 | 3 ********************************* -->
    <el-table
      v-if="type == 2 || type == 3"
      show-summary
      :summary-method="handleSum"
      ref="TableRef"
      :data="data">
      <el-table-column type="index" :label="$t('序号')" width="60" align="center" />

      <!-- sku -->
      <el-table-column show-overflow-tooltip :label="$t('sku编号')" align="center" prop="skuNo" />

      <!-- sku名字 -->
      <el-table-column show-overflow-tooltip :label="$t('sku名字')" align="center" prop="skuName" />
      <el-table-column show-overflow-tooltip :label="$t('云价格')" align="center" prop="cloudPrice" />

      <!-- 申请时价格 -->
      <el-table-column show-overflow-tooltip :label="$t('申请时价格')" align="center" prop="applyPrice" />

      <!-- 申请数量 -->
      <el-table-column show-overflow-tooltip :label="$t('申请数量')" align="center" prop="applyNum" />

      <!-- 该申请可用数量 -->
      <el-table-column show-overflow-tooltip :label="$t('该申请可用数量')" align="center" prop="useNum" />

      <!--出售数量 -->
      <el-table-column show-overflow-tooltip :label="$t('出售数量')" align="center" prop="saleNum" />

      <!--付款数量 -->
      <el-table-column show-overflow-tooltip :label="$t('付款数量')" align="center" prop="payNum" />

      <!--退回数量 -->
      <el-table-column show-overflow-tooltip :label="$t('退回数量')" align="center" prop="backNum" />

      <!--提前付款数量 -->
      <el-table-column show-overflow-tooltip :label="$t('提前付款数量')" align="center" prop="payNum" />
    </el-table>
    <!-- ******************************** type == 2 | 3 end ********************************* -->

    <!-- ******************************** type == 4 ********************************* -->
    <el-table v-if="type == 4" show-summary :summary-method="handleSum" ref="TableRef" :data="data">
      <el-table-column type="index" :label="$t('序号')" width="60" align="center" />
      <!-- 平台 -->
      <el-table-column show-overflow-tooltip align="center" :label="$t('订单平台类型')" prop="type">
        <!-- 订单平台类型:1-亚马逊 2-乐天 3-雅虎拍卖 4-雅虎商城 5-煤炉(法人) 6-沃尔玛 7-煤炉(个人) -->
        <template slot-scope="{ row }">
          <span v-if="row.type == 1">
            <!-- 亚马逊 -->
            {{ $t('亚马逊') }}
          </span>
          <span v-if="row.type == 2">
            <!-- 乐天 -->
            {{ $t('乐天') }}
          </span>
          <span v-if="row.type == 3">
            <!-- 雅虎拍卖 -->
            {{ $t('雅虎拍卖') }}
          </span>
          <span v-if="row.type == 4">
            <!-- 雅虎商城 -->
            {{ $t('雅虎商城') }}
          </span>
          <span v-if="row.type == 5">
            <!-- 煤炉(法人) -->
            {{ $t('煤炉(法人)') }}
          </span>
          <span v-if="row.type == 6">
            <!-- 沃尔玛 -->
            {{ $t('沃尔玛') }}
          </span>
          <span v-if="row.type == 7">
            <!--  7-煤炉(个人) -->
            {{ $t('煤炉(个人)') }}
          </span>
        </template>
      </el-table-column>
      <!-- 店铺名称 -->
      <el-table-column show-overflow-tooltip align="center" :label="$t('店铺名称')" prop="shopName" />
      <!-- 订单号 -->
      <el-table-column show-overflow-tooltip :label="$t('订单号')" align="center" prop="orderNo" />
      <!-- 收货人 -->
      <el-table-column show-overflow-tooltip :label="$t('收货人')" align="center" prop="receiveName" />
      <!-- 收货人电话 -->
      <el-table-column show-overflow-tooltip :label="$t('收货人电话')" align="center" prop="receivePhone" />
      <!-- 营业额 -->
      <el-table-column show-overflow-tooltip :label="$t('营业额')" align="center" prop="turnover" />
      <!-- 消费税 -->
      <el-table-column show-overflow-tooltip :label="$t('消费税')" align="center" prop="tax" />
      <!-- 收货人地址 -->
      <el-table-column show-overflow-tooltip :label="$t('收货人地址')" align="center" prop="address1">
        <template slot-scope="{ row }">
          <span>{{ handleReceiveAddress(row) }}</span>
        </template>
      </el-table-column>
      <!-- 包裹号 -->
      <el-table-column show-overflow-tooltip :label="$t('包裹号')" align="center" prop="packageNo" />
    </el-table>
    <!-- ******************************** type == 4 end ********************************* -->
    <!-- *************************************type ==8 satrt ******************************** -->
    <el-table v-if="type == 8" show-summary :summary-method="handleSum" ref="TableRef" :data="data">
      <el-table-column type="index" :label="$t('序号')" width="60" align="center" />

      <!-- sku -->
      <el-table-column show-overflow-tooltip :label="$t('sku编号')" align="center" prop="skuNo" />

      <!-- sku名字 -->
      <el-table-column show-overflow-tooltip :label="$t('sku名字')" align="center" prop="skuName" />

      <!-- 申请时价格 -->
      <el-table-column show-overflow-tooltip :label="$t('申请时价格')" align="center" prop="applyPrice" />

      <!-- 申请数量 -->
      <el-table-column show-overflow-tooltip :label="$t('申请数量')" align="center" prop="applyNum" />

      <!-- 该申请可用数量 -->
      <el-table-column show-overflow-tooltip :label="$t('该申请可用数量')" align="center" prop="useNum" />

      <!--出售数量 -->
      <el-table-column show-overflow-tooltip :label="$t('出售数量')" align="center" prop="saleNum" />

      <!--付款数量 -->
      <el-table-column show-overflow-tooltip :label="$t('付款数量')" align="center" prop="payNum" />

      <!--退回数量 -->
      <el-table-column show-overflow-tooltip :label="$t('退回数量')" align="center" prop="backNum" />

      <!--提前付款数量 -->
      <el-table-column show-overflow-tooltip :label="$t('提前付款数量')" align="center" prop="remark" />
    </el-table>
    <!-- *************************************type ==8 end ******************************** -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">
        <!-- 关闭 -->
        {{ $t('关闭') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import handleTableSum from '@/utils/handleSum'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    /**
     * data
     */
    data: {
      type: Array,
      default: () => [],
    },
    /**
     * 标题
     */
    title: {
      type: String,
      required: true,
    },
    /**
     * type
     */
    type: {
      type: [String, Number],
      required: true,
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      queryParams: {},
    }
  },
  watch: {
    show: function (newValue) {
      if (newValue) {
        console.log(` ==>`, JSON.parse(JSON.stringify(this.data)))
      }
    },
  },
  methods: {
    handleReceiveAddress(row) {
      return (
        (row.address1 || '') +
        (row.address2 || '') +
        (row.address3 || '') +
        (row.address4 || '') +
        (row.address5 || '') +
        (row.address6 || '')
      )
    },
    handleNeedSumData() {
      let needSumFieldList = []
      let sumText = '总价'
      let offset = 1
      switch (this.type) {
        case 1:
          needSumFieldList = [
            'handleNum',
            'handleWaitPayNum',
            'handlePayNum',
            'payTotal',
            'waitPayTotal',
            'totalPrice',
          ]
          break
        case 2:
          needSumFieldList = ['cloudPrice','applyPrice']
          break
        case 3:
          needSumFieldList = ['bundleFee', 'deliveryFee']
          break
        case 4:
          needSumFieldList = ['turnover']
          break
        default:
          break
      }
      return {
        needSumFieldList,
        sumText,
        offset,
      }
    },
    handleSum(param) {
      /**
       * 需要进行统计的字段
       */
      const { needSumFieldList, offset, sumText } = this.handleNeedSumData()
      return handleTableSum(param, needSumFieldList, sumText, offset)
    },

    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss"></style>
